<template>
    <!-- New Folder -->
    <UxDialog :visible="!!value" @close="close()">
        <div class="insert-folder">
            <template v-if="type == 'insert'">
                <img src="@/assets/images/files/dialog-folder-add.png" alt="">
                <span>New folder</span>
            </template>

            <template v-if="type == 'rename'">
                <img src="@/assets/images/files/dialog-folder-set.png" alt="">
                <span>Rename the folder</span>
            </template>
            <!-- <span>Please enter the folder title</span> -->
            <label><input oninput="name=name.replace(/[^\w\.\/]/ig,'')" type="text" v-model="name" placeholder="Please enter a folder name" /></label>
            <button @click="sumbit($event)" type="primary">OK</button>

            <UxLoading2 :loading="loading" />
        </div>
    </UxDialog>
</template>
<script>
export default {
    name: "MaterialsFolderEditor",
    props: {
        value: { type: Object, default: () => null },
    },
    data () {
        return {
            name: "",
            loading: false,
        };
    },
    computed: {
        type () {
            if (this.value && this.value.id) {
                return "rename";
            } else {
                return "insert";
            }
        },
    },
    watch: {
        value (newval, oldval) {
            // 展示时
            if (newval == oldval) {
                // 相同不计算
            } else if (newval) {
                this.name = newval.folder_name || "";
            } else {
                this.name = "";
            }
        },
    },
    methods: {
        // 关闭
        close (item) {
            this.$emit("close", "");
            this.$emit("input", null);
        },

        // 添加成功
        success (item) {
            this.$emit("success", "");
        },

        // 修改文件夹名称
        async updateFolder () {
            let name = this.name;
            let id = this.value.id;
            let request = { folder_name: name };
            if (this.loading) {
                return;
            }
            this.loading = true;
            let res = await this.$http("Material.putMaterialFolder/" + id, request);
            if (res.code == 0) {
                this.success();
                this.close();
                this.loading = false;
                this.$uxMessage.success("Folder renamed successfully");
            } else {
                this.loading = false;
                this.$uxMessage.error("Failed to rename folder");
            }
        },

        // 添加文件夹
        async insertFolder () {
            let name = this.name;
            if (this.loading) {
                return;
            }
            this.loading = true;
            let res = await this.$http("Material.postMaterialFolder", {
                folder_name: name,
            });
            if (res.code == 0) {
                this.success();
                this.close();
                this.loading = false;
                this.$uxMessage.success("Add folder successfully");
            } else {
                this.$uxMessage.error("Failed to add folder");
                this.loading = false;
            }
        },

        // 表单提交
        sumbit () {
            if (!this.name) {
                // 没有名字，不能提交
                this.$uxMessage.error("The name is 1 to 64 digits");
            } else if (this.name.length > 64 || this.name.length < 1) {
                this.$uxMessage.error("The name is 1 to 64 digits");
            } else if (this.value && this.value.id) {
                this.updateFolder();
            } else {
                this.insertFolder();
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.insert-folder {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 60px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;

    & > img {
        width: 80px;
        height: 80px;
    }

    & > span {
        margin-top: 20px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
    }

    label {
        margin: 24px 0 0;
        flex: 1;
        width: 100%;
        display: flex;
    }

    input {
        width: 100%;
        height: 32px;
        padding: 8px;
        background: #ffffff;
        box-sizing: border-box;
        line-height: 16px;
    }

    & > button {
        margin-top: 24px;
        width: 100%;
        height: 38px;
    }
}
</style>
